<template>
  <div class="interview-code-panel">
    <el-tabs type="border-card" v-model="activeTab" @tab-click="onTabClick">
      <el-tab-pane
        v-for="problem in problemData"
        :key="problem._id"
        :label="problem.title"
        :name="problem._id"
      >
        <code-panel-share ref="codePanelShare"></code-panel-share>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import CodePanelShare from "@/components/Interview/CodePanelShare.vue";
export default {
  name: "InterviewCodePanel",
  components: {
    CodePanelShare,
  },
  mounted() {
    // console.log("interviewCodePanel mounted", this.problemData);
    this.changeProblemView();
  },
  updated() {
    // console.log("interviewCodePanel updated", this.problemData);
    this.changeProblemView();
  },
  // beforeDestroy() {
  //   console.log("beforeDestroy");
  // },
  // destroyed() {
  //   console.log("destroyed");
  // },
  methods: {
    changeProblemView() {
      // console.log("changeProblemView userId:", this.userId);
      let roomId = this.$route.params.rid;
      let problemId = this.activeTab;
      // console.log("changeProblemView problemId:", problemId);
      this.docName = roomId + "/" + problemId;
      this.authorName;
      const type = window.sessionStorage.getItem("usertype");
      if (type != 1) {
        this.userId = window.sessionStorage.getItem("userid");
        this.authorName = this.userId;
      } else {
        this.authorName = this.userId;
      }
      // console.log("changeProblemView docName:", this.docName);
      // console.log("changeProblemView authorName:", this.authorName);
      this.$nextTick(() => {
        this.$refs["codePanelShare"][this.problemIdx].initShareEdit(
          this.docName,
          this.authorName
        );
      });
    },
    setProblemData(data) {
      this.problemIdx = 0;
      this.problemData = data;
      this.setProblem(this.problemData[0]);
      // console.log("setProblemData", this.problemData);
    },
    setUserId(uid) {
      this.userId = uid;
    },
    setProblem(problem) {
      this.problem = problem;
      this.activeTab = this.problem._id;
      // console.log("setProblem activeTab", this.activeTab);
    },
    setActiveTab(tabName) {
      this.activeTab = tabName;
    },
    onTabClick(tab) {
      let pid = tab.name;
      this.problem = this.problemData.find((problem) => {
        return problem._id === pid;
      });
      this.problemIdx = this.problemData.indexOf(this.problem);
      this.$nextTick(() => {
        this.$refs["codePanelShare"][this.problemIdx].editer.refresh();
      });
    },
    onSubmit() {
      // axios
      //   .post("/api/docTransfer/moveMany", {})
      //   .then((response) => {
      //     console.log(response);
      //     this.$message.success("提交代码成功");
      //   })
      //   .catch((error) => {
      //     console.log(error);
      //     this.$message.error("提交代码失败");
      //   });
      // /* axios
      //   .post("/api/docTransfer/clearMany", {
      //     pid: this.problem._id,
      //   })
      //   .then((response) => {
      //     console.log(response);
      //     this.$message.success("提交代码成功");
      //   })
      //   .catch((error) => {
      //     console.log(error);
      //     this.$message.error("提交代码失败");
      //   }); */
    },
  },

  data() {
    return {
      activeTab: "",
      userId: "",
      problemIdx: 0,
      docName: "",
      authorName: "",
      problem: {
        _id: "",
        title: "",
        difficulty: 0,
        content: "",
        status: 0,
      },
      problemData: [],
      // problemData: [
      //   {
      //     _id: "1",
      //     title: "test1",
      //     difficulty: 1,
      //     content: "111111",
      //     status: 1,
      //   },
      //   {
      //     _id: "2",
      //     title: "test2",
      //     difficulty: 2,
      //     content: "222222",
      //     status: 1,
      //   },
      //   {
      //     _id: "3",
      //     title: "test3",
      //     difficulty: 3,
      //     content: "333333",
      //     status: 1,
      //   },
      // ],
    };
  },
};
</script>

<style></style>
